<template>
    <view>
        <custom :tap_refresh="()=>{$refs.navTabList.listForceInit()}"><template #backText>申请提现</template></custom>
        <navTabList ref="navTabList" :tab.sync="tab" :changeTab="changeTab">
            <template #top>
                <view v-if="tab.cur == 'balance'">
                    <nFormItem key="form_my_balance_amount" title="可用红包" :value="$store.state.user.user_asset_info.balance_amount | floor"></nFormItem>
                    <nFormItem key="form_balance_amount" title="提现数量" format="number" :data.sync="balance" field="balance_amount"></nFormItem>
                </view>
                <view v-else-if="tab.cur == 'goods'">
                    <nFormItem key="form_my_goods_amount" title="可用货款" :value="$store.state.user.user_asset_info.goods_amount | floor"></nFormItem>
                    <nFormItem key="form_goods_amount" title="提现数量" format="number" :data.sync="goods" field="goods_amount"></nFormItem>
                    <nFormItem key="form_goodsTakeAmount" v-if="goodsTakeAmount" title="手续费" :value="goodsTakeAmount"></nFormItem>
                    <nFormItem key="form_goods_amount_sub_goodsTakeAmount" v-if="goodsTakeAmount" title="到账金额" :value="goods.form.goods_amount | bc('sub', goodsTakeAmount)"></nFormItem>
                </view>
                <nFormButton :title="tab.list[tab.cur].title" :tap="withdraw"></nFormButton>
                <nBar :title="tab.list[tab.cur].title+'日志'"></nBar>
            </template>
            <template #list="data">
                <nMenuItemTopBottom v-for="(info, key) in data.list" :key="key">
                    <template #top>
                        <text class="text-666">{{info.order_no}}</text>
                        <text class="text-gray">{{info.created_at | dateFormat('yyyy-MM-dd')}}</text>
                    </template>
                    <template #bottom>
                        <view>
                            <template v-if="tab.cur == 'goods'">
                                <text class="text-deep-nddyny text-bold cuIcon-icloading"></text>
                                <text class="text-deep-nddyny text-bold margin-left-6 margin-right-20">
                                    {{info.goods_take_ratio}}%
                                </text>
                            </template>
                            <text class="text-nddyny text-bold cuIcon-recharge"></text>
                            <text class="text-nddyny text-bold margin-left-6">
                                {{(tab.cur == 'balance' ? info.balance_amount : info.goods_amount) | floor(2)}}
                            </text>
                        </view>
                        <view class="flex align-center">
                            <view class="text-green" v-if="info.withdraw_change_time != 0">{{info.withdraw_change_time | dateFormat('yyyy-MM-dd hh:mm')}}</view>
                            <view v-if="info.withdraw_status == 0" class="bg-nddyny cu-tag margin-left-20">待审核</view>
                            <view v-if="info.withdraw_status == 1" class="bg-green cu-tag margin-left-20">已发放</view>
                            <view v-if="info.withdraw_status == 2" class="bg-red cu-tag margin-left-20">未通过</view>
                        </view>
                    </template>
                </nMenuItemTopBottom>
            </template>
        </navTabList>
    </view>
</template>

<script>
    export default {
        data() {
            let balance_form = {
                balance_amount: ''
            };
            let goods_form = {
                goods_amount: ''
            };
            let tab_list = {
                balance: {
                    title: '提现红包',
                    uri: '/user/asset/withdrawBalanceList',
                }
            };
            if (this.$store.state.user.is_seller_firm) {
                tab_list['goods'] = {
                    title: '提现货款',
                    uri: '/user/asset/withdrawGoodsList',
                };
            }
            return {
                tab: {
                    cur: 'balance',
                    list: tab_list,
                    apiList: {}
                },
                balance: {
                    formtag: {},
                    form: this.$nddyny.object.copy(balance_form),
                    formbak: this.$nddyny.object.copy(balance_form),
                },
                goods: {
                    take_ratio: 0,
                    formtag: {},
                    form: this.$nddyny.object.copy(goods_form),
                    formbak: this.$nddyny.object.copy(goods_form),
                }
            }
        },
        onReady() {
            this.$refs.navTabList.listInit();
        },
        onReachBottom() {
            this.$refs.navTabList.listAdd();
        },
        computed: {
            goodsTakeAmount() {
                if (!this.goods.form.goods_amount || !this.goods.take_ratio) {
                    return 0;
                }
                return this.$nddyny.bc.mul(this.goods.form.goods_amount, this.$nddyny.bc.div(this.goods.take_ratio, 100));
            }
        },
        methods: {
            changeTab(key) {
                if (key == 'goods' && !this.goods.take_ratio) {
                    this.$api.config(this, '商家.提现货款.手续费比例', (config) => {
                        this.goods.take_ratio = config['商家.提现货款.手续费比例'];
                    })
                }
            },
            withdraw() {
                let url;
                if (this.tab.cur == 'balance') {
                    url = '/user/asset/withdrawBalance';
                } else if (this.tab.cur == 'goods') {
                    url = '/user/asset/withdrawGoods';
                } else {
                    return;
                }
                this.$api.post(this, {
                    loading: '提现申请中',
                    url: url,
                    data_key: this.tab.cur,
                    success: (Result, data_key) => {
                        if (this.$api.form.toast(this, Result, data_key)) return;
                        this.$user.updateUserAssetInfo(this);
                        this[this.tab.cur].form = this.$nddyny.object.copy(this[this.tab.cur].formbak);
                        this.$refs.navTabList.listForceInit();
                        this.$store.commit('userToastSuccess', '申请提现成功');
                    }
                });
            }
        }
    }
</script>
